<template>
  <div class="hwrapper" ref="hwrapper">
    <div class="hscroll" ref="hscroll">
      <div class="item-list">
        <span class="item" v-for="item of h_itemlists" :key="item.id">{{
          item.title
        }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import ObserveDom from "@better-scroll/observe-dom";
BScroll.use(ObserveDom);
export default {
  name: "h-scroll",
  props: {
    h_itemlists: Array,
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.hwrapper, {
      click: true,
      observeDOM: true,
      scrollX: true,
      scrollY: false,
      startX: 0,
      eventPassthrough: "vertical",
    });
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.hwrapper {
  width: 100vw;
  .hscroll {
    width: 20rem;
    margin-top: 0.2rem;
    margin-bottom: -0.2rem;
    white-space: nowrap;
    height: 8vh;
    .item-list {
      margin-left: 0.2rem;
      height: 0.7166rem;
      .item {
        margin-left: 0.2rem;
        font-size: $subTitleFontSize;
        text-align: center;
        line-height: 0.5rem;
        color: #fff;
        border-radius: 0.32rem;
        height: 0.546rem;
        padding: 0.01rem 0.32rem;
        display: inline-block;
        background: $themeColor;
      }
    }
  }
}
</style>